.dw-page  // rename?
  // A child, the root thread .dw-depth-0, floats left.
  clearfix()

  position: relative

  a
    cursor: pointer

  // When jumping between bookmarks, and pages are cached client side, new pages appear
  // so fast so it's hard to see what's happening. But with this fade-in animation,
  // it's more clear that a new page got shown, after clicking a bookmark.  [render_bookms]
  animation: fadeInPage 200ms ease-in-out;

@keyframes fadeInPage
  from
    opacity: 0.2;
  to
    opacity: 1;


// Deleted?
//==============================

// Also see crossGray().
.s_Pg_DdX
  background-repeat: no-repeat;
  background-position: center center;
  // One \  line and three ///  lines = a cross with two extra / line:
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M50 0 L0 50 ' stroke='%23ddd' stroke-width='0.2'/><path d='M100 0 L0 100 ' stroke='%23ddd' stroke-width='0.2'/><path d='M100 50 L50 100 ' stroke='%23ddd' stroke-width='0.2'/><path d='M0 0 L100 100 ' stroke='%23ddd' stroke-width='0.2'/></svg>")
  z-index: 5;
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  bottom: 0;
  pointer-events: none;

.s_Pg_DdInf
  float: left;
  margin: 26px 0 14px;
  font-size: 28px;
  font-style: italic;
  color: hsl(0, 0%, 35%);
  font-weight: bold;


// Columns
//==============================

$sidebarZIndex = 1010
$contextbarWidth = 25vw; // = win width 1/4, and 4 is used on the next line. Dupl in js [5RK9W2]
$contextbarMinWidth = 270px; // has effect when window width < 270 * 4 = 1080. Dupl in JS [4FK0ZD]

// The maximum window width for which the context bar's width is its min width.
$contextbarHasMinWidthMaxWinWidth = $contextbarMinWidth * 4;

// The page column has its own scrollbar, and the watchbar and contextbar too, so the window
// doesn't need any scrollbar. (Some js code knows about this [6GKF0WZ])
body
  overflow: hidden;
  // Withouth height: 100vh, the heiht is 0, and TalkyardTour is then unable to place things
  // in the middle of document.body. [27KAH5]
  width: 100vw;
  height: 100vh;

.s_Tb-Fxd,
.esScrollBtns_fixedBar,
html:not(.s_InIframe) #esPageColumn
  top: 0;
  bottom: 0;
  position: fixed;
  // Move the contents a bit to the left/right if sidebars open...
  left: $watchbarWidth;
  right: $contextbarWidth;
  @media (max-width: $contextbarHasMinWidthMaxWinWidth)
    right: $contextbarMinWidth;
  &.s_Tb-Fxd
    bottom: auto;
html:not(.s_InIframe).esSidebarsOverlayPage
  .s_Tb-Fxd,
  .esScrollBtns_fixedBar,
  #esPageColumn
    // ...but if the screen too small, let the sidebars overlay the page instead.
    left: 0;
    right: 0;

#esPageColumn
  // Native scrollbars look different in different browsers. Use js scrollbars instead?
  // E.g.: http://stackoverflow.com/a/25480648/694469
  // or http://jscrollpane.kelvinluck.com/index.html
  // — but fixed now? I added -webkit-scrollbar-... styles a bit below.
  overflow-y: auto;
  overflow-x: visible;

  // Without this, if loading more topics in the topic list, Chrome jumps to
  // the bottom of the page — so one loses one's scroll position and cannot easily
  // see the start of the additional loaded topics.
  &.s_NoScrlAncr
    overflow-anchor: none;

// In embedded forums, if the editor is open, the iframe becomes 1px too short, and
// scrollbars appear. Didn't manage to add 1px without the iframe also starting
// sending 'iframeOffsetWinSize' events and growing 1px all the time. So let's just
// hide the scrollbars, and have the 1px at the bottom of the page disappear:
//
// Or skip? [dont_incl_editor_in_ifram_height]
// Let's have the editor in its own iframe, like for embedded comments. Works better I think.
//html.n_InEmbForum #esPageColumn
//  overflow-y: hidden;

// Enables momentum based scrolling, on iPhone, which is otherwise only enabled for <body>.
html.ios:not(.s_InIframe) #esPageColumn
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

#esWatchbarColumn
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: $watchbarWidth;
  z-index: $sidebarZIndex;

#esThisbarColumn
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: $contextbarWidth;
  min-width: $contextbarMinWidth;
  z-index: $sidebarZIndex;
html.esSidebarsOverlayPage
  #esThisbarColumn
    width: 330px;
    max-width: calc(100% - 25px);

// Dims the page if any sidebar open, and screen small. Closes the sidebar on click.
html:not(.s_InIframe).esSidebarsOverlayPage
  &.es-pagebar-open,
  &.es-watchbar-open
    #theSidebarPageOverlay
      display: block;

#theSidebarPageOverlay
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $sidebarZIndex - 1;
  background: black;
  opacity: 0.7;
  display: none;


html.s_InIframe,
html:not(.es-pagebar-open)
  #esThisbarColumn
    display: none;
  .s_Tb-Fxd,
  .esScrollBtns_fixedBar,
  #esPageColumn
    right: 0;

html.s_InIframe,
html:not(.es-watchbar-open)
  #esWatchbarColumn
    display: none;
  .s_Tb-Fxd,
  .esScrollBtns_fixedBar,
  #esPageColumn
    left: 0;

// Editor to the left  (or right, if rtl language)
//------------------------------

// If placing the editor to the left of the page content, need to move the page
// content to the right, so it won't be occluded by the editor.
// (Need not consider the cases of a too narrow screen, or of being in an iframe
// — then the editor-to-the-left layout isn't available.)
html.c_Html-EdLeft
  &:not(.es-watchbar-open)
    .s_Tb-Fxd,
    #esPageColumn
      // 45% width to the editor, 55% to the page content.
      left: calc(100% * 0.45);  // [ed_left_width]

  &.es-watchbar-open
    .s_Tb-Fxd,
    #esPageColumn
      // Move everything $watchbarWidth to the right.
      left: calc((100% - 230px) * 0.45 + 230px);  // [ed_left_width]

    // @media (min-width: ???)
    // then can hardcode left — since editor has max width.  [ed_left_max_width]

// On forum topic list pages, the editor gets 60% of the space, since
// now the editor includes the preview too (there's no page to show any
// in-page-preview in).
// And on discussion pages, if the user has clicked Preview (so that the textarea
// and preview are shown side by side, like on a topic list page).
html.c_Html-EdLeft:has(.s_E-SplitOr),
html.c_Html-EdLeft.es-forum   // or add .s_E-SplitOr also if topic list view? [ed_prv_orig_splits]
  &:not(.es-watchbar-open)
    // Move both the topbar and the page itself to the right, to leave space
    // for the editor:
    .s_Tb-Fxd,
    #esPageColumn
      left: calc(100% * 0.60);  // [ed_left_width]

  // If the left sidebar is open, add its width:
  &.es-watchbar-open
    .s_Tb-Fxd,
    #esPageColumn
      left: calc((100% - 230px) * 0.60 + 230px);  // [ed_left_width] $watchbarWidth


// Page width & padding
//==============================

// Avoid overflow or horizontal scrolling.  [avoid_hz_scroll]
// Might as well do this for everything in the page?  [nicewrap]  Otherwise,
// more precisely needed for the .dw-p-bd-blk, in case people type long word
//  or urls — and for the category/tags, in case a category name is long.
.esPage
  word-break: break-word;   // works in Safari, iOS, although deprecated...
  //overflow-wrap: anywhere; // ... this instead, but Safari doesn't understand.
  // But not this: (makes the browser break wherever, ignoring word boundaries)
  //word-break: break-all;

// We focus the page column, on page load, so the Page Down etc keys work
// — but it doesn't look nice with a :focus outline around the page.
#esPageColumn:focus
  outline: none;

.esScrollBtns_fixedBar,
#esPageColumn
  .container
    width: 100%;
    // This'll be for forum topic layouts 3,4,5 = excerpt on separate line —> needn't be so wide
    max-width: 1050px;  // [page_max_width]

setContainerMaxWidth($maxWidth)
  .esScrollBtns_fixedBar,
  #esPageColumn
    .container
      max-width: $maxWidth;

html.s_PT-7  // forum
  &.s_PL-1
    setContainerMaxWidth(1080px);
  // 2 = Title & excerpt on the same line —> make a bit wider
  &.s_PL-2
    setContainerMaxWidth(1110px);
  // 6 = TopicListLayout = news feed: title & excerpt shown full width, so don't be too wide
  &.s_PL-6
    setContainerMaxWidth(850px);

#topbar > .container,
#dwPosts > .container,
#dwPosts > div > .container,
.s_Tb .container,
.esAdminArea > .container,
#dwPosts > div > .s_Tb .container  // try to remove
  padding-left: 20px;
  padding-right: 20px;
  @media (max-width: 850px)
    padding-left: 15px;
    padding-right: 15px;
  @media (max-width: 700px)
    padding-left: 11px;
    padding-right: 11px;
  @media (max-width: 600px)
    padding-left: 9px;
    padding-right: 9px;

html.es-watchbar-open:not(.esSidebarsOverlayPage)
  #topbar > .container,
  #dwPosts > .container,
  #dwPosts > div > .container,
  .s_Tb .container,
  .esAdminArea > .container,
  #dwPosts > div > .s_Tb .container  // try to remove
    padding-left: 25px;

#dwPosts
  position: relative;

#thePageBottom
  clear: both;

/*
#esPageColumn[max-width='801px']
  .container
    padding: 0 12px;

#esPageColumn[max-width='651px']
  .container
    padding: 0 8px;

#esPageColumn[max-width='581px']
  .container
    padding: 0 6px;
*/


// The Original Post
//==============================

// Title icon explanation.
.s_Pg_TtlExpl li
  list-style: none;
  display: inline-block;
  margin: 0 0 0 3px;

  &:not(:first-child)
    margin-left: 13px;

.s_Pg_TtlExpl_Active
  border: 2px solid hsl($uiHue, 40%, 75%);
  padding: 2px 9px 2px 8px;
  border-radius: 41%;


.dw-about-category
  .dw-about-cat-ttl-prfx
    margin: 45px 0 0;
    padding: 0 0 5px;
    clear: both; // if there's a float-left help box above
    font-size: 19px;
    font-weight: normal;
    strong
      font-style: italic;

  .dw-p-ttl
    margin-top: 0

.dw-p-ttl .icon-trash::before
  // If it's too dark, people think they should click it.
  color: hsl(0, 0%, 61%);

.dw-ar-p
  padding-bottom: 0.8em

.esOP_title-deleted
  color: #888;
  crossGray();


// Don't need so much space (15px [h1_pad_top]) between categories and title.
.s_Tb_Pg_Cs + .dw-page h1.dw-p-ttl
  padding-top: 10px;

// Page title
#dw-t-0    // the page title post has id 0
  // Don't float title, or body will appear to the right of the title,
  // rather than below it.
  // There're no SVG arrows that can be cropped, see above, [8DbF3].
  float: none
  // Left align the title.
  margin-left: 0

.dw-forum #dw-t-0
  // Forum topics page title not so interesting — smaller font, 30px not 33px.
  h1.dw-p-ttl
    font-size: 30px;

  // Some space between the forum title and any intro text.
  margin-bottom: 17px;


// Less whitespace
//==============================

// There's typically lots of whitespace above the title.
// So, move the whole page up a bit, almost inside the topbar — looks better.
// But only if there's lots of space
//  — otherwise the Open-watchbar button (to the left) will push the
// page title (or categories breadcrumbs), to the right, so becomes un-aligned
// with the page text.
// Update, 2025-03: Oh that happens also with `margin-top: -10px`. Let's
// change to position: relative, -10px instead.

@media (min-width: 1300px)
  .dw-forum.container,
  .esPage > .container
    // margin-top: - $moveSectionTitleUpPx;
    position: relative;
    top: - $moveSectionTitleUpPx;

  .esPage .s_Tb_Pg_Cs
    padding-top: 0;  // else sth like 4px
    margin-top: -3px;  // the categories list is mostly whitespace — remove some above

h1.dw-p-ttl a:not(.icon-edit):not(.dw-forum-intro-show)
  color: $h1Color; // but not link color
  &:hover
    text-decoration: underline;


// Internal backlinks
.s_InLns
  float: left;
  // Align with post actions, e.g. the Orig Post Reply button. [post_acts_valign]
  margin: $postActionsMarginTop 30px 0 0;

.s_InLns_Ttl
  padding-top: 8px; // align w Like, Reply etc button icons and text
  margin: 0 0 5px;
  color: hsl(0, 0%, 45%);
  //font-style: italic;
  //letter-spacing: 0.2px;
  //word-spacing: 0.5px;
  line-height: 165%;  // same as Reply button, so v-aligned [post_acts_valign]

.s_InLns li
  margin: 0 0 13px -1px;
  list-style: none;
  display: inline-block;

a.s_InLns_Ln
  color: hsl(0, 0%, 45%) !important;
  margin-right: 20px;
  &::before
    margin-right: 5px;


// The append-bottom comments section
//==============================

.s_PgSct
  margin-bottom: 42px !important;
  margin-top: -2px !important;
  padding: 8px 0;
  background: hsl(0, 0%, 98%);
  color: hsl(0, 0%, 31%);
  border: 1px solid hsl(0, 0%, 94%);
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 17px;

.s_PgSct_Dtl
  font-size: 14px;
  margin-top: 4px;

.DW .s_PgSct-Dsc
  margin: -15px 0 20px !important; // top: or to much space between the Metabar and this



// Footer
//==============================

// 'flex' apparently doesn't work on iOS, so disable it on iOS. [5YKJ24]
// But does work on Safari

// Also, skip if in an embedded forum — then, the footer is in an iframe which won't be
// at the bottom of the screen anyway.

// Make the footer stick to the bottom.
// See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
html:not(.n_InEmbForum)
  &:not(.ios)
    #esPageScrollable // not iOS: see [5YKJ24] above
      display: flex;
      flex-direction: column;
      height: 100%; // supposedly avoid some IE 10-11 min-height bug

  #dwPosts
    flex: 1 0 auto;

  // This works around a Safari bug that lets flex elems shrink smaller than min-height/width,
  // see: https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
  .esPageHeader,
  #topbar,
  footer
    flex: none;
  .footer
    margin-top: 0;

// For the default <footer><p><a>Terms of use<a>Privacy policy:  [5UK62W]
footer
  margin-top: 28px;  // [footer_margin_top]
  p
    text-align: center;
    margin: 1em 0;
  a:link
    color: #444;
    text-decoration: underline;
    margin: 0 1ex;



// Scrollbars
//==============================
// They'd otherwise be hidden in Safari (shown only if the user scrolls).

.es-pagebar-open #esPageColumn
  $scrollbarTrackColor = hsl(0, 0%, 93%);
  $scrollbarThumbColor = hsl(0, 0%, 79%);
  $scrollbarThumbHoverColor = hsl(0, 0%, 66%);
  $scrollbarArrowColor = hsl(0, 0%, 55%);

  // Show, because is the border between the page contents and the contextbar (which is open;
  // we checked for .es-pagebar-open above).
  overflow-y: scroll;

  &::-webkit-scrollbar
    -webkit-appearance: none; // none? Weird but works.
    width: $pageScrollbarWidth;

  // The ^ and v buttons at the top and bottom of the scrollbar.
  &::-webkit-scrollbar-button:vertical:increment,
  &::-webkit-scrollbar-button:vertical:decrement
    display: block;
    background-color: $scrollbarTrackColor;
    border: 7px solid $scrollbarTrackColor;
    &:hover
      border-color: hsl(0, 0%, 80%);
    &:increment
      border-top: 7px solid $scrollbarArrowColor;
      &:start
        display: none; // otherwise there'll be both an up & down btn at the top
    &:decrement
      border-bottom: 7px solid $scrollbarArrowColor;
      &:end
        display: none; // see comment above

  &::-webkit-scrollbar-track
    background-color: $scrollbarTrackColor;
    border-radius: 0;
    padding: 10px 0 3px;

  &::-webkit-scrollbar-thumb
    border-radius: 0;
    background-color: $scrollbarThumbColor;
    &:hover
      background-color: $scrollbarThumbHoverColor;


// Embedded comments in frames
//==============================

.s_InIframe .esPage > .container
  margin: 0;


// About category pages
//==============================

// One shouldn't do anything but editing, and possibly link to, a category descr topic. [4AKBE02]
.s_PT-9
  .dw-a-change,
  .dw-a-reply,
  .dw-a-like,
  .s_APAs,
  .esMetabar,
  .dw-a-more
    display: none;

  // Make the Edit icon easier to find. Only the pencil seems hard to see.
  .dw-a-edit.icon-edit::after
    content: 'Edit';
    color: hsl(0, 0%, 18%);
    opacity: 1;
    margin-left: 3px;

// Code pages and templates
//==============================

.dw-page[data-page_role=Code] > h1
  margin-bottom: 0
  font-size: 20px

.dw-page[data-page_role=Code] > h1
.dw-page[data-page_role=Code] p
  font-family: monospace


// Terms, Privacy
//==============================

.esLegal
  margin-top: 50px;

.esLegal_home
  margin-bottom: 25px;

.esLegal_home_link
  color: #444;

.esLegal_home_arw
  font-size: 19px;
  line-height: 0;

.esLegal_home,
.esLegal .nav-pills a
  font-size: 14px;

.esLegal .nav-pills a
  background: hsl(0, 0%, 94%);
  color: hsl(0, 0%, 23%);
  &:hover
    background: hsl(0, 0%, 80%);
    color: hsl(0, 0%, 13%);
  &.active a
    cursor: default

